{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
{% extends 'default_frame.twig' %}

{% block javascript %}
<script>
$(function() {

    $('.delivery').on('change', function() {
        $('#shopping-form').attr('action', '{{ url("shopping_delivery") }}').submit();
        return false;
    });

    $('.payment').on('change', function() {
        $('#shopping-form').attr('action', '{{ url("shopping_payment") }}').submit();
        return false;
    });

    $('.btn-shipping').click(function() {
        $('#shopping-form').attr('action', $(this).attr('href')).submit();
        $('#shopping-form').attr('action', '{{ url("shopping_confirm") }}');
        return false;
    });

    $('.btn-shipping-edit').click(function() {
        $('#shopping-form').attr('action', $(this).attr('href')).submit();
        $('#shopping-form').attr('action', '{{ url("shopping_confirm") }}');
        return false;
    });

    $('.btn-shipping-multiple').click(function() {
        $('#shopping-form').attr('action', $(this).attr('href')).submit();
        $('#shopping-form').attr('action', '{{ url("shopping_confirm") }}');
        return false;
    });

    {% if is_granted('ROLE_USER') == false %}
        var ref = [];
        var name = [];
        var input = [];
        var customerin = [];

        $('#customer').click(function() {
            // ref = $('.customer-name01');
            var edit = $('.customer-edit');
            var hidden = $('.customer-in');

            $(edit).each(function(index) {
                ref[index] = $(this);
            });
            $(hidden).each(function(index) {
                customerin[index] = $(this);
            });
            $(ref).each(function(index) {
                name[index] = $(this).text();
            });
            $(name).each(function(index) {
                input[index] = $('<input id="edit' + index + '" type="text" />').val(name[index]);
            });
            $(input).each(function(index) {
                ref[index].empty().append(input[index]);
            });

            $('#customer').prop("disabled", true);
            $('.mod-button').show();
        });

        $('#customer-ok').click(function() {
            $(ref).each(function(index) {
                var nameAfter = input[index].val();
                ref[index].empty().text(nameAfter);
                customerin[index].val(nameAfter);
                input[index].remove();
            });

            var postData = {};
            $('.customer-in').each(function() {
                postData[$(this).attr('name')] = $(this).val();
            });

            $.ajax({
                url: "{{ url('shopping_customer') }}",
                type: 'POST',
                data: postData,
                dataType: 'json',
            }).done(function(){
            }).fail(function(){
                alert('更新に失敗しました。入力内容を確認してください。');
                $(ref).each(function(index) {
                    ref[index].empty().text(name[index]);
                    input[index].remove();
                });
            });

            $('#customer').prop("disabled", false);
            $('.mod-button').hide();
        });

        $('#customer-cancel').click(function() {
            $(ref).each(function(index) {
                ref[index].empty().text(name[index]);
                input[index].remove();
            });

            $('#customer').prop("disabled", false);
            $('.mod-button').hide();
        });
    {% endif %}

});
</script>
{% endblock javascript %}

{% block main %}
    <h1 class="page-heading">ご注文内容のご確認</h1>
    <div id="confirm_wrap" class="container-fluid">
        <div id="confirm_flow_box" class="row">
            <div id="confirm_flow_box__body" class="col-md-12">
                {% if is_granted('ROLE_USER') %}
                <div id="confirm_flow_box__flow_state" class="flowline step3">
                {% else %}
                <div id="confirm_flow_box__flow_state" class="flowline step4">
                {% endif %}
                    <ul id="confirm_flow_box__flow_state_list" class="clearfix">
                    <li><span class="flow_number">1</span><br>カートの商品</li>
                    {% if is_granted('ROLE_USER') %}
                        <li class="active"><span class="flow_number">2</span><br>ご注文内容確認</li>
                        <li><span class="flow_number">3</span><br>完了</li>
                    {% else %}
                        <li><span class="flow_number">2</span><br>お客様情報</li>
                        <li class="active"><span class="flow_number">3</span><br>ご注文内容確認</li>
                        <li><span class="flow_number">4</span><br>完了</li>
                    {% endif %}
                    </ul>
                </div>
                {% for error in app.session.flashbag.get('eccube.front.error')  %}
                    <div id="confirm_flow_box__message" class="message">
                        <p class="errormsg bg-danger">
                            <svg class="cb cb-warning"><use xlink:href="#cb-warning" /></svg>{{ error|trans|nl2br }}
                        </p>
                    </div>
                {% endfor %}
                    {% set productStr = app.session.flashbag.get('eccube.front.request.product') %}
                    {% for error in app.session.flashbag.get('eccube.front.request.error')  %}
                        {% set idx = loop.index0 %}
                        {% if productStr[idx] is defined %}
                            <div id="cart_box__message--{{ loop.index }}" class="message">
                                <p class="errormsg bg-danger">
                                    <svg class="cb cb-warning"><use xlink:href="#cb-warning" /></svg>
                                    {{ error|trans({'%product%':productStr[idx]})|nl2br }}
                                </p>
                            </div>
                        {% else %}
                            <div id="confirm_flow_box__message--{{ loop.index }}" class="message">
                                <p class="errormsg bg-danger">
                                    <svg class="cb cb-warning"><use xlink:href="#cb-warning" /></svg>{{ error|trans|nl2br }}
                                </p>
                            </div>
                        {% endif %}
                    {% endfor %}
            </div><!-- /.col -->
        </div><!-- /.row -->
        <form id="shopping-form" method="post" action="{{ url('shopping_confirm') }}">
            {{ form_widget(form._token) }}
            <div id="shopping_confirm" class="row">
                <div id="confirm_main" class="col-sm-8">
                    <div id="cart_box" class="cart_item table">
                        <div id="cart_box_list" class="tbody">
                            {% for orderDetail in Order.orderDetails %}
                            <div id="cart_box_list__item_box--{{ loop.index }}" class="item_box tr">
                                <div id="cart_box_list__item--{{ loop.index }}" class="td table">
                                    <div id="cart_box_list__photo--{{ loop.index }}" class="item_photo"><img src="{{ app.config.image_save_urlpath }}/{{ orderDetail.product.MainListImage|no_image_product }}" alt="{{ orderDetail.productName }}" /></div>
                                    <dl id="cart_box_list__detail--{{ loop.index }}" class="item_detail">
                                        <dt id="cart_box_list__name--{{ loop.index }}" class="item_name text-default">{{ orderDetail.productName }}</dt>
                                        <dd id="cart_box_list__class_category--{{ loop.index }}" class="item_pattern small">
                                            {% if orderDetail.productClass.classCategory1 %}
                                                {{ orderDetail.productClass.classCategory1.className }}：{{ orderDetail.productClass.classCategory1 }}
                                            {% endif %}
                                            {% if orderDetail.productClass.classCategory2 %}
                                                <br>{{ orderDetail.productClass.classCategory2.className }}：{{ orderDetail.productClass.classCategory2 }}
                                            {% endif %}
                                        </dd>
                                        <dd id="cart_box_list__price--{{ loop.index }}" class="item_price">{{ orderDetail.priceIncTax|price }} × {{ orderDetail.quantity|number_format }}</dd>
                                        <dd id="cart_box_list__subtotal--{{ loop.index }}" class="item_subtotal">小計：{{ orderDetail.totalPrice|price }}</dd>
                                    </dl>
                                </div>
                            </div><!--/item_box-->
                            {% endfor %}
                        </div>
                    </div><!--/cart_item-->
                    <p><a id="confirm_box__quantity_edit_button" href="{{ url('cart') }}" class="btn btn-default btn-sm">数量を変更または削除する</a></p>
                    <h2 class="heading02">お客様情報</h2>
                    <div id="customer_detail_box" class="column is-edit">
                        <p id="customer_detail_box__customer_address" class="address"><span class="customer-edit customer-name01">{{ Order.name01 }}</span> <span class="customer-edit customer-name02">{{ Order.name02 }}</span> 様<br>
                        〒<span class="customer-edit customer-zip01">{{ Order.zip01 }}</span>-<span class="customer-edit customer-zip02">{{ Order.zip02 }}</span> <span class="customer-edit customer-pref">{{ Order.pref }}</span><span class="customer-edit customer-addr01">{{ Order.addr01 }}</span><span class="customer-edit customer-addr02">{{ Order.addr02 }}</span><br>
                        <span class="customer-edit customer-tel01">{{ Order.tel01 }}</span>-<span class="customer-edit customer-tel02">{{ Order.tel02 }}</span>-<span class="customer-edit customer-tel03">{{ Order.tel03 }}</span></p>
                        {% if is_granted('ROLE_USER') == false %}
                            <div class="customer-edit customer-email">{{ Order.email }}</div>
                            <div class="customer-edit customer-company_name">{{ Order.companyName }}</div>
                            <div class="mod-button" style="display:none;">
                                <span id="customer-ok"><button type="button" class="btn btn-default btn-sm">OK</button></span>
                                <span id="customer-cancel"><button type="button" class="btn btn-default btn-sm">キャンセル</button></span>
                            </div>
                            <p class="btn_edit"><button type="button" id="customer" class="btn btn-default btn-sm">変更</button></p>
                            <input type="hidden" id="customer-name01" class="customer-in" name="customer_name01" value="{{ Order.name01 }}">
                            <input type="hidden" id="customer-name02" class="customer-in" name="customer_name02" value="{{ Order.name02 }}">
                            <input type="hidden" id="customer-zip01" class="customer-in" name="customer_zip01" value="{{ Order.zip01 }}">
                            <input type="hidden" id="customer-zip02" class="customer-in" name="customer_zip02" value="{{ Order.zip02 }}">
                            <input type="hidden" id="customer-pref" class="customer-in" name="customer_pref" value="{{ Order.pref }}">
                            <input type="hidden" id="customer-addr01" class="customer-in" name="customer_addr01" value="{{ Order.addr01 }}">
                            <input type="hidden" id="customer-addr02" class="customer-in" name="customer_addr02" value="{{ Order.addr02 }}">
                            <input type="hidden" id="customer-tel01" class="customer-in" name="customer_tel01" value="{{ Order.tel01 }}">
                            <input type="hidden" id="customer-tel02" class="customer-in" name="customer_tel02" value="{{ Order.tel02 }}">
                            <input type="hidden" id="customer-tel03" class="customer-in" name="customer_tel03" value="{{ Order.tel03 }}">
                            <input type="hidden" id="customer-email" class="customer-in" name="customer_email" value="{{ Order.email }}">
                            <input type="hidden" id="customer-company-name" class="customer-in" name="customer_company_name" value="{{ Order.companyName }}">
                        {% endif %}
                    </div>

                    <h2 class="heading02">配送情報</h2>
                    {% for shipping in Order.shippings %}
                        {% set idx = loop.index0 %}
                        <div id="shipping_confirm_box--{{ idx }}" class="column is-edit">
                            <h3>お届け先{% if Order.multiple %}({{ loop.index }}){% endif %}</h3>
                            <div id="shipping_confirm_box__body--{{ idx }}" class="cart_item table">
                                <div id="shipping_confirm_box__list--{{ idx }}" class="tbody">
                                {% for shipmentItem in shipping.shipmentItems %}
                                    <div id="shipping_confirm_box__item--{{ idx }}_{{ shipmentItem.id }}" class="item_box tr">
                                        <div id="shipping_box__body_inner--{{ idx }}_{{ shipmentItem.id }}" class="td table">
                                            <div id="shipping_box__photo--{{ idx }}_{{ shipmentItem.id }}" class="item_photo"><img src="{{ app.config.image_save_urlpath }}/{{ shipmentItem.product.MainListImage|no_image_product }}" alt="{{ shipmentItem.productName }}" /></div>
                                            <dl id="shipping_box__detail--{{ idx }}_{{ shipmentItem.id }}" class="item_detail">
                                                <dt id="shipping_box__name--{{ idx }}_{{ shipmentItem.id }}" class="item_name text-default">{{ shipmentItem.productName }}</dt>
                                                <dd id="shipping_box__class_category--{{ idx }}_{{ shipmentItem.id }}" class="item_pattern small">
                                                    {% if shipmentItem.productClass.classCategory1 %}
                                                        {{ shipmentItem.productClass.classCategory1.className }}：{{ shipmentItem.productClass.classCategory1 }}
                                                    {% endif %}
                                                    {% if shipmentItem.productClass.classCategory2 %}
                                                        <br>{{ shipmentItem.productClass.classCategory2.className }}：{{ shipmentItem.productClass.classCategory2 }}
                                                    {% endif %}
                                                </dd>
                                                <dd id="shipping_box__price--{{ idx }}_{{ shipmentItem.id }}" class="item_price">{{ shipmentItem.priceIncTax|price }} × {{ shipmentItem.quantity|number_format }}</dd>
                                                <dd id="shipping_box__subtotal--{{ idx }}_{{ shipmentItem.id }}" class="item_subtotal">小計：{{ shipmentItem.totalPrice|price }}</dd>
                                            </dl>
                                        </div>
                                    </div><!--/item_box-->
                                {% endfor %}
                                </div>
                            </div>

                            <p id="shopping_confirm_box__shipping_address_detail--{{ idx }}" class="address">{{ shipping.name01 }} {{ shipping.name02 }} 様<br>
                            〒{{ shipping.zip01 }}-{{ shipping.zip02 }} {{ shipping.pref }}{{ shipping.addr01 }}{{ shipping.addr02 }}<br>
                            {{ shipping.tel01 }}-{{ shipping.tel02 }}-{{ shipping.tel03 }}</p>
                            <div id="shopping_confirm_box__shipping_delivery--{{ idx }}" class="form-inline form-group">
                                <label>配送方法</label>
                                {{ form_widget(form.shippings[idx].delivery, {'attr': {'class': 'delivery'}}) }}
                                {{ form_errors(form.shippings[idx].delivery) }}
                            </div>

                            <div id="shopping_confirm_box__shipping_delivery_date_time--{{ idx }}" class="form-inline form-group">
                                <label>お届け日</label>
                                {{ form_widget(form.shippings[idx].shippingDeliveryDate) }}<br class="sp">
                                <label>お届け時間</label>
                                {{ form_widget(form.shippings[idx].deliveryTime) }}
                            </div>
                            {% if is_granted('ROLE_USER') %}
                            <p id="shopping_confirm_box__edit_button--{{ idx }}" class="btn_edit"><a href="{{ url('shopping_shipping_change', {'id': shipping.id}) }}" class="btn btn-default btn-sm btn-shipping">変更</a></p>
                            {% else %}
                            <p id="shopping_confirm_box__edit_button--{{ idx }}" class="btn_edit"><a href="{{ url('shopping_shipping_edit_change', {'id': shipping.id}) }}" class="btn btn-default btn-sm btn-shipping-edit">変更</a></p>
                            {% endif %}
                        </div>
                        {% if loop.last == false%}<hr>{% endif %}
                    {% endfor %}
                    {% if BaseInfo.optionMultipleShipping %}
                        <hr>
                        <div><a id="shopping_confirm_box__button_edit_multiple"  href="{{ url('shopping_shipping_multiple_change') }}" class="btn btn-default btn-sm btn-shipping-multiple">お届け先を追加する</a></div>
                    {% endif %}

                    <h2 class="heading02">お支払方法</h2>
                    <div id="payment_list" class="column">
                        <div id="payment_list__body" class="form-group">
                            <ul id="payment_list__list" class="payment_list">
                            {% if form.payment is empty %}
                                <p class="errormsg text-danger">合計金額に対して可能な支払い方法がありません。<br>{{ BaseInfo.email02 }}にお問い合わせ下さい。</p>
                            {% endif %}
                            {% for key, child in form.payment %}
                            <li>
                                {{ form_widget(child, {'attr': {'class': 'payment' }}) }}
                                {% if form.payment.vars.choices[key].data.payment_image is not null %}
                                <img src="{{ app.config.image_save_urlpath }}/{{ form.payment.vars.choices[key].data.payment_image }}">
                                {% endif %}
                            </li>
                            {% endfor %}
                            {{ form_errors(form.payment) }}
                            </ul>
                        </div>
                    </div>
                    <h2 class="heading02">お問い合わせ欄</h2>
                    <div id="contact_message" class="column">
                        {{ form_widget(form.message, {'attr': {'placeholder': 'お問い合わせ事項がございましたら、こちらにご入力ください。(3000文字まで)', 'rows': '6'}}) }}
                        {{ form_errors(form.message) }}
                    </div>
                    <div class="extra-form column">
                        {% for f in form.getIterator %}
                            {% if f.vars.name matches '[^plg*]' %}
                                {{ form_row(f) }}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div><!-- /.col -->

                <div id="confirm_side" class="col-sm-4">
                    <div id="summary_box__total_box" class="total_box">
                        <dl id="summary_box__subtotal">
                            <dt>小計</dt>
                            <dd class="text-primary">{{ Order.subtotal|price }}</dd>
                        </dl>
                        <dl id="summary_box__quantity_price">
                            <dt>手数料</dt>
                            <dd>{{ Order.charge|price }}</dd>
                        </dl>
                        <dl id="summary_box__shipping_price">
                            <dt>送料</dt>
                            <dd>{{ Order.deliveryFeeTotal|price }}</dd>
                        </dl>
                        {% if Order.discount > 0 %}
                        <dl id="summary_box__discount_price">
                            <dt>値引き</dt>
                            <dd>{{ (0 - Order.discount)|price}}</dd>
                        </dl>
                        {% endif %}
                        <div id="summary_box__result" class="total_amount">
                            <p id="summary_box__total_amount" class="total_price">合計 <strong class="text-primary">{{ Order.total|price }}<span class="small">税込</span></strong></p>
                            <p id="summary_box__confirm_button"><button id="order-button" type="submit" class="btn btn-primary btn-block prevention-btn prevention-mask">注文する</button></p>
                        </div>
                    </div>
                </div>
            </div><!-- /.row -->
        </form>
    </div>
{% endblock %}